<template>
  <div style="width: 500px">
    <el-popover placement="bottom" width="auto" trigger="click">
      <template #default>
        <slot></slot>
      </template>
      <template #reference>
        <el-badge
          :value="value"
          :is-dot="isDot"
          :max="max"
          class="item"
          style="cursor: pointer"
        >
          <component :is="icon"></component>
        </el-badge>
      </template>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  icon: {
    type: String,
    defult: 'BellFilled',
  },
  value: {
    type: [String, Number],
    default: '',
  },
  max: {
    type: Number,
  },
  isDot: {
    type: Boolean,
    default: false,
  },
})
</script>

<style scoped lang="scss"></style>
